<template>
	<view class="">
		<!-- #ifdef APP-PLUS -->
		<top-set></top-set>
		<tab-top title="绑定手机号码"></tab-top>
		<!-- #endif -->
		<view class="login-content">
			<view class="box">
				<!-- 头像 -->
				<view class="user_img">
					<image :src="head_img" mode=""></image>
				</view>
				<!-- 账号 -->
				<view class="uni-form-item uni-column form-box">
					<view class="title">
						<image src="/static/login/iphone.png" mode=""></image>
					</view>
					<input class="uni-input" type="number" v-model="phone" placeholder-class="place-holder" placeholder="请输入手机号码" />
					<view  @tap="getVerb()" class="verb" :class="[getCode?'verb_b':'']">{{verbTitle}}</view>
				</view>
				<!-- 输入验证码 -->
				<view class="uni-form-item uni-column form-box form2">
					<view class="title">
						<image src="/static/login/verb.png" mode=""></image>
					</view>
					<input class="uni-input" v-model="verbText" type="number" placeholder="请输入验证码" />
				</view>
				<!-- 输入密码 -->
				<view class="uni-form-item uni-column form-box form2">
					<view class="title">
						<image src="/static/login/password.png" mode=""></image>
					</view>
					<input v-if="!passVisible" class="uni-input" v-model="passText" type="text" placeholder="请输入密码" />
					<input v-if="passVisible" class="uni-input" v-model="passText" password type="password" placeholder="请输入密码" />

					<view :class="[passVisible?'pass-icon-v':'pass-icon']" @tap="changePassVisible()">
						<image :src="passVisible?'/static/login/visual.png':'/static/login/invisible.png'" mode=""></image>
					</view>
				</view>
				<!-- 登录按钮 -->
				<view class="uni-padding-wrap uni-common-mt">
					<button type="primary" @tap="psotWxInfo()">立即绑定</button>
				</view>
				<!-- 用户协议 -->
				<view class="user_agr">
					<text class="agr1">点击“立即绑定”即表示同意</text>
					<text class="agr2">客栈帮手用户协议</text>
				</view>
			

			</view>
		</view>
	</view>
</template>

<script>

	import "@/common/css/login.scss";
	let wxInfo;
	let CryptoJS = require("crypto-js");
	export default {
		data() {
			return {
				passVisible: true, //密码可见
				passText: '',
				phone:'',
				verbText:'',
				getCode: false,
				verbTitle: '获取验证码',
				head_img:""
			}
		},
		onLoad(e) {
			console.log(123);
			console.log(JSON.stringify(e));
			this.getWxInfo();
		},
		components: {},
		computed: {},
		methods: {
			changeLoginType(type) {
				this.loginType = type;
			},
			changePassVisible() {
				this.passVisible = !this.passVisible;
			},
			aes_encrypt(plainText) {
				const AES_KEY = "qq3217834abcdefg"; //16位
				const AES_IV = "1234567890123456"; //16位
				var encrypted = CryptoJS.AES.encrypt(plainText, CryptoJS.enc.Utf8.parse(AES_KEY), {
					iv: CryptoJS.enc.Utf8.parse(AES_IV)
				});
				return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
			},
			/**
			 * 绑定
			 */
			loginBtn() {
				
				uni.navigateTo({
					url: '/pages/login/set-pass'
				});
			},
			/**
			 * 绑定微信
			 */
			psotWxInfo(){
				this.req({
					url:'user/bindWx',
					data:{
						open_id:wxInfo.openId,
						username:wxInfo.nickName,
						gender:wxInfo.gender,
						province:wxInfo.province,
						city:wxInfo.city,
						country:wxInfo.country,
						avatarUrl:wxInfo.avatarUrl,
						unionId:wxInfo.unionId,
						phone:this.phone,
						key:'login',
						verificationCode:this.verbText,
						password:this.aes_encrypt(this.passText),
						confirmPassword:this.aes_encrypt(this.passText)
					}
				},
				(res) => {
					console.log( JSON.stringify(res));
					if(res.data.status == 0){
						/**
						 * 绑定失败
						 */
						uni.showToast({
							title:res.data.data.title
						})
					}else{
						/**
						 * 绑定成功
						 */
						this.afterLogin(res.data.data);
						if (res.data.data.type == 0) {
							uni.navigateTo({
								url: '/pages/identity/iden-selection?uid=' + res.data.data.id
							});
						} else {
							uni.navigateBack({
								delta: 10
							});
						}
					}
					
				},
				(res) => {
					console.log( JSON.stringify(res));
				});
			},
			/**
			 * 获取用户微信信息
			 */
			getWxInfo() {
				uni.getUserInfo({
					provider: 'weixin',
					success: (result) => {
						console.log(JSON.stringify(result));
						wxInfo = result.userInfo;
						this.head_img = result.userInfo.avatarUrl
					},
					fail: (error) => {
						console.log('getUserInfo fail', error);
						let content = error.errMsg;
						if (~content.indexOf('uni.login')) {
							content = '请在登录页面完成登录操作';
						}
						uni.showModal({
							title: '获取用户信息失败',
							content: '错误原因' + content,
							showCancel: false
						});
					}
				});
				
			},
			/**
			 * 获取验证码
			 */
			getVerb() {
				if (this.getCode) {
					return;
				}
				this.req({
						url: 'api/sendSms',
						method: 'get',
						data: {
							key: 'login',
							phone: this.phone
						}
					},
					(res) => {
						if (res.data.status == 1) {
							this.getCode = true;
							let second = 59;
							this.verbTitle = second + 's';
			
							let timer = setInterval(() => {
			
								second--;
								this.verbTitle = second + 's';
			
			
								if (second <= 0) {
									this.getCode = false;
									this.verbTitle = '获取验证码';
									clearInterval(timer);
								}
			
							}, 1000);
			
			
						}
			
					},
					(res) => {
			
					});
			}
		}
	}
</script>

<style lang="scss">
	.login-content {
		box-sizing: border-box;
		width: 100%;
		padding: 112upx 68upx 0 102upx;
	}
	.user_img{
		margin: 0 auto;
		margin-bottom: 102upx;
		width: 120upx;
		height: 120upx;
		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			will-change: transform;
		}
	}
	.verb_b {
		color: #999999 !important;
	}
</style>
